<!--
  oooooooo8   ooooooo  oooo   oooo ooooooooooo oooooooooo    ooooooo  ooooo        oooooooo8  
o888     88 o888   888o 8888o  88  88  888  88  888    888 o888   888o 888        888         
888         888     888 88 888o88      888      888oooo88  888     888 888         888oooooo  
888o     oo 888o   o888 88   8888      888      888  88o   888o   o888 888      o         888 
 888oooo88    88ooo88  o88o    88     o888o    o888o  88o8   88ooo88  o888ooooo88 o88oooo888  
                                                                                              -->

<div class="controlsContainer">
    <ul class="control-sections">
        <li *ngIf="configService.getFeatureGroup('selection_controls', 'any') && configService.getFeature('selecting_techniques')">
            <div *ngIf="configService.getFeatureGroupCount('selection_controls') >= 3" class="section-label">
                selection controls
            </div>


            <!-- lock selection locks -->
            <div *ngIf="configService.getFeature('selecting_techniques')" class="control-row-item">
                <div class="control-row-button dropdown noselect"
                    (click)="currentDropdown = currentDropdown !== 'selection_behavior' ? 'selection_behavior' : null;"
                    matTooltipPosition="below"
                    matTooltip="selection behavior">
                    <img src="assets/icons/ic_lock_black_24px.svg"/>
                </div>
                <div class="dropdown-container select_behavior" *ngIf="currentDropdown === 'selection_behavior'" #dropdown [class.left]="checkalign(dropdown)">
                    <!-- selectTechniquesAcrossTactics -->
                    <div>
                        <input id="select_behavior_tactic" class="checkbox-custom" type="checkbox" [(ngModel)]="viewModel.selectTechniquesAcrossTactics">
                        <label for="select_behavior_tactic" class="checkbox-custom-label noselect">select techniques across tactics</label>
                    </div>
                    <!-- selectSubtechniquesWithParent -->
                    <div *ngIf="configService.getFeature('subtechniques')">
                        <input id="select_behavior_subtechnique" class="checkbox-custom" type="checkbox"  [(ngModel)]="viewModel.selectSubtechniquesWithParent">
                        <label for="select_behavior_subtechnique" class="checkbox-custom-label noselect">select sub-techniques with parent</label>
                    </div>
                </div>
            </div>

            
            <!-- Search -->
            <div *ngIf="configService.getFeature('search')" class="control-row-item">

                <div class="control-row-button dropdown noselect"
                    (click)="currentDropdown = currentDropdown !== 'search' ? 'search' : null;"
                    matTooltipPosition="below"
                    matTooltip="search">
                    <img src="assets/icons/ic_search_black_24px.svg"/>
                </div>

                <div class="dropdown-container search" *ngIf="currentDropdown === 'search'" #dropdown [class.left]="checkalign(dropdown)">
                    <app-techniques-search [viewModel]="viewModel"></app-techniques-search>
                </div>
            </div>


            <!-- Multi-select -->
            <div *ngIf="configService.getFeature('multiselect')" class="control-row-item">
                <div class="control-row-button dropdown noselect"
                    (click)="currentDropdown = currentDropdown !== 'multiselect' ? 'multiselect' : null;"
                    matTooltipPosition="below"
                    matTooltip="multi-select">
                    <img src="assets/icons/ic_playlist_add_black_24px.svg"/>
                </div>
                <div class="dropdown-container multiselect" *ngIf="currentDropdown === 'multiselect'" #dropdown [class.left]="checkalign(dropdown)">
                    <app-multiselect [viewModel]="viewModel"></app-multiselect>
                </div>
            </div>


            <!-- deselect all -->
            <div *ngIf="configService.getFeature('deselect_all')" class="control-row-item">
                <div class="control-row-button noselect"
                     (click)="viewModel.clearSelectedTechniques(); currentDropdown = null;"
                     matTooltipPosition="below"
                     matTooltip="deselect {{this.viewModel.getSelectedTechniqueCount()}} techniques">
                    <img src="assets/icons/ic_clear_black_24px.svg" alt="deselect all"/>
                    <span class="deselectNumber">{{this.viewModel.getSelectedTechniqueCount()}}</span>
                </div>
            </div>


        </li>
        <li *ngIf="configService.getFeatureGroup('layer_controls', 'any')">
            <div *ngIf="configService.getFeatureGroupCount('layer_controls') >= 2" class="section-label">
                layer controls
            </div>

            <!-- layer name, description and metadata -->
            <div *ngIf="configService.getFeature('layer_info')" class="control-row-item">

                <div class="control-row-button dropdown noselect"
                     (click)="currentDropdown = currentDropdown !== 'description' ? 'description' : null"
                     matTooltipPosition="below"
                     matTooltip="layer information">
                     <img src="assets/icons/ic_description_black_24px.svg" alt="layer information" />
                 </div>

                 <!-- description input (invisible, absolute) -->
                 <div class="dropdown-container inputfield layer_info"  #dropdown [class.left]="checkalign(dropdown)"
                      *ngIf="currentDropdown === 'description'">

                    <!-- layer name field -->
                    <div class="name_desc">
                        <mat-form-field>
                                <input matInput
                                        type="text"
                                        placeholder="name"
                                        [(ngModel)]="viewModel.name" />
                            </mat-form-field>
        
                            <!-- layer description field -->
                            <mat-form-field>
                                <textarea matInput
                                            matTextareaAutosize
                                            placeholder="description"
                                            [(ngModel)]="viewModel.description">
                                </textarea>
                            </mat-form-field>
                    </div>
                    <div class="metadata_input">
                        <b class="metadata-label">Metadata</b>
                        <table>
                            <tr class="formfield-group" *ngFor="let metadata of viewModel.metadata; let $i = index">
                                <td></td>
                                <td>
                                    <mat-form-field>
                                            <input matInput
                                                    type="text"
                                                    placeholder="name"
                                                    [(ngModel)]="metadata.name" />
                                        </mat-form-field>
                                        <mat-form-field>
                                            <input matInput
                                                type="text"
                                                placeholder="value"
                                                [(ngModel)]="metadata.value" />
                                        </mat-form-field>
                                        <button class="button" (click)="viewModel.removeMetadata($i)">remove this metadata</button>
                                </td>                                
                            </tr>
                            <tr>
                                <td colspan=2 class="addmore">
                                        <button class="button" (click)="viewModel.addMetadata()">add more metadata</button>
                                </td>
                            </tr>
                        </table>

                    </div>
                 </div>
             </div>



            <!-- save locally as JSON -->
            <div *ngIf="configService.getFeature('download_layer')" class="control-row-item">
                <div class="control-row-button noselect"
                    (click)="saveLayerLocally()"
                    matTooltipPosition="below"
                    matTooltip="download layer as json">
                    <img src="assets/icons/ic_file_download_black_24px.svg" alt="save layer"/>
                </div>
            </div>

            <!-- export to excel -->
            <div *ngIf="configService.getFeature('export_excel')" class="control-row-item">
                <div class="control-row-button noselect"
                    (click)="saveLayerLocallyExcel()"
                    matTooltipPosition="below"
                    matTooltip="export to excel">
                    <img src="assets/icons/baseline-grid_on-24px.svg" alt="save layer"/>
                </div>
            </div>

         
            <!-- render layer to SVG -->
            <div *ngIf="configService.getFeature('export_render')" class="control-row-item">
                <div class="control-row-button noselect"
                    (click)="exportRender()"
                    matTooltipPosition="below"
                    matTooltip="render layer to SVG">
                    <img src="assets/icons/ic_camera_alt_black_24px.svg" alt="export render"/>
                </div>
            </div>

            <!-- Filters -->
            <div *ngIf="configService.getFeature('filters')" class="control-row-item">

                <div class="control-row-button dropdown noselect"
                    (click)="currentDropdown = currentDropdown !== 'filters' ? 'filters' : null;"
                    matTooltipPosition="below"
                    matTooltip="filters">
                    <img src="assets/icons/ic_filter_list_black_24px.svg"/>
                </div>
                <div class="dropdown-container filters" *ngIf="currentDropdown === 'filters'" #dropdown [class.left]="checkalign(dropdown)">
                    <div class="filter" *ngFor="let filter of ['platforms']">
                        <b class="filter-label">{{filter}}</b>
                        <div *ngIf="viewModel.filters[filter].options.length !== 0">
                            <div class="filter-option" *ngFor="let filterOption of viewModel.filters[filter].options" >
                                <!-- <label class="noselect"><input type="checkbox" (click)="viewModel.filters.toggleInFilter(filter, filterOption); filterTechniques()" [checked]="viewModel.filters.inFilter(filter, filterOption)">{{filterOption}}</label> -->
                                <input [id]="filterOption" class="checkbox-custom" type="checkbox" (click)="viewModel.filters.toggleInFilter(filter, filterOption);" [checked]="viewModel.filters.inFilter(filter, filterOption)">
                                <label for="{{filterOption}}" class="checkbox-custom-label noselect">{{filterOption}}</label>
                            </div>
                        </div>
                        <div *ngIf="viewModel.filters[filter].options.length == 0">
                            Data does not include {{filter}}
                        </div>
                        <!-- <div class="filter-option" *ngFor="let filterOption of viewModel.filters[filter].options" (click)="viewModel.filters.toggleInFilter(filter, filterOption); filterTechniques()">
                            {{filterOption}}  {{viewModel.filters.inFilter(filter, filterOption)}}
                        </div> -->
                    </div>
                    <!-- <mat-select placeholder="platforms" [(ngModel)]="platformControl"
                        multiple disableRipple autofocus (change)="filterTechniques(); viewModel.filters.platforms.selection = platformsControl">
                        <mat-option *ngFor="let platformOption of viewModel.filters.platforms.options" [value]="platformOption">{{platformOption}}</mat-option>
                    </mat-select> -->
                    <!-- <filter-menu [dataTable]="this"></filter-menu> -->
                </div>
            </div>

            <!-- sorting -->
            <div *ngIf="configService.getFeature('sorting')" class="control-row-item">
                <div class="control-row-button noselect"
                    (click)="viewModel.sorting = (viewModel.sorting + 1) % 4;"
                    matTooltipPosition="below"
                    [matTooltip]="['sorting alphabetically ascending', 'sorting alphabetically descending', 'sorting by score ascending', 'sorting by score descending'][viewModel.sorting]">
                    <img [src]="['assets/icons/ic_sort_alphabetically_ascending_black_24px.svg', 'assets/icons/ic_sort_alphabetically_descending_black_24px.svg', 'assets/icons/ic_sort_numerically_ascending_black_24px.svg', 'assets/icons/ic_sort_numerically_descending_black_24px.svg'][viewModel.sorting]" alt="sorting"/>
                </div>
            </div>

            <!-- color setup -->
            <div *ngIf="configService.getFeature('color_setup')" class="control-row-item">
                <div class="control-row-button dropdown noselect"
                    (click)="currentDropdown = currentDropdown !== 'colorSetup' ? 'colorSetup' : null; viewModel.updateGradient()"
                    matTooltipPosition="below"
                    matTooltip="color setup">
                    <img src="assets/icons/ic_palette_black_24px.svg"/>
                </div>
                <div class="dropdown-container colorSetup" *ngIf="currentDropdown === 'colorSetup'" #dropdown [class.left]="checkalign(dropdown)">

                    <div class="tacticRowColor">
                        <div class="gradient-section-label">
                            Tactic Row Background
                        </div>
                        <div class="gradient-section-content">
                            <input id="showTacticRowBackground" type="checkbox" class="checkbox-custom" [(ngModel)]=viewModel.showTacticRowBackground>
                            <label for="showTacticRowBackground" class="checkbox-custom-label noselect">show</label>
                            <input class="colorpicker" [(colorPicker)]="viewModel.tacticRowBackground" [(ngModel)]="viewModel.tacticRowBackground" [style.background]="viewModel.tacticRowBackground" cpPosition="bottom" [cpPresetColors]="['#ddd', '#aaaaaa', '#205B8F', '#B9482D']">
                        </div>
                    </div>
                    <div class="gradient">
                        <div class="gradient-section-label">
                            Scoring Gradient
                        </div>
                        <div class="gradient-controls gradient-section-content">
                            <table>
                                <tr class="minmax top">
                                    <td>Low value:</td>
                                    <td class="col2"><input type="number" (input)="viewModel.updateGradient()" [(ngModel)]="viewModel.gradient.minValue" [max]=viewModel.gradient.maxValue></td>
                                </tr>
                                <tr>
                                    <td class="buttons">
                                        <div *ngFor="let gradientStep of viewModel.gradient.colors; let $i = index">
                                            <div class="left">
                                                <button (click)="viewModel.removeGradientColor($i)" [disabled]="viewModel.gradient.colors.length == 2">remove</button>
                                            </div>
                                            <div class="right">
                                                <input class="colorpicker" (colorPickerChange)="viewModel.updateGradient()" (cpPresetColorsChange)="viewModel.updateGradient()" (cpSliderChange)="viewModel.updateGradient()" (cpInputChange)="viewModel.updateGradient()" [(colorPicker)]="gradientStep.color" [(ngModel)]="gradientStep.color" [style.background]="gradientStep.color" cpPosition="bottom" [cpPresetColors]="viewModel.gradient.options">
                                                <!-- <select [(ngModel)]="gradientStep.color" (ngModelChange)="viewModel.updateGradient()">
                                                    <option *ngFor="let color of viewModel.gradient.options" [ngValue]="color">{{color}}</option>
                                                    option shows up if a nonstandard option is selected, from uploading a custom layer
                                                    <option *ngIf="!(viewModel.gradient.labelToColor.hasOwnProperty(gradientStep.color))" [ngValue]=gradientStep.color>{{gradientStep.color}}</option>
                                                </select> -->
                                            </div>
                                        </div>
                                    </td>
                                    <td class="col2" [style.background-image]="sanitize(viewModel.gradient.gradient.css('linear', 'to bottom'))"> </td>
                                </tr>
                                <tr>
                                    <td><button class="addcolor" (click)="viewModel.addGradientColor();">add another color</button></td>
                                </tr>
                                <tr class="minmax bottom">
                                    <td>High value: </td>
                                    <td class="col2 "><input type="number" (input)="viewModel.updateGradient()" [(ngModel)]="viewModel.gradient.maxValue" [min]=viewModel.gradient.minValue></td>
                                </tr>
                            </table>
                            <div class="display-buttons">
                                <div class="squarebutton dropdown noselect" (click)="presetsMenuVisible = !presetsMenuVisible">
                                    presets<span style="font-size:5pt">▼</span>
                                </div >
                                <div class="dropdown-container presetsmenu" *ngIf="presetsMenuVisible">
                                    <div class="squarebutton noselect gradient" (click)="viewModel.gradient.setGradientPreset('redgreen'); presetsMenuVisible = false; viewModel.updateGradient()" [style.background-image]="sanitize(viewModel.gradient.presetToTinyColor('redgreen'))">red to green</div>
                                    <div class="squarebutton noselect gradient" (click)="viewModel.gradient.setGradientPreset('greenred'); presetsMenuVisible = false; viewModel.updateGradient()" [style.background-image]="sanitize(viewModel.gradient.presetToTinyColor('greenred'))">green to red</div>
                                    <div class="squarebutton noselect gradient" (click)="viewModel.gradient.setGradientPreset('bluered'); presetsMenuVisible = false; viewModel.updateGradient()" [style.background-image]="sanitize(viewModel.gradient.presetToTinyColor('bluered'))">blue to red</div>
                                    <div class="squarebutton noselect gradient" (click)="viewModel.gradient.setGradientPreset('redblue'); presetsMenuVisible = false; viewModel.updateGradient()" [style.background-image]="sanitize(viewModel.gradient.presetToTinyColor('redblue'))">red to blue</div>
                                    <div class="squarebutton noselect gradient" (click)="viewModel.gradient.setGradientPreset('whiteblue'); presetsMenuVisible = false; viewModel.updateGradient()" [style.background-image]="sanitize(viewModel.gradient.presetToTinyColor('whiteblue'))">white to blue</div>
                                    <div class="squarebutton noselect gradient" (click)="viewModel.gradient.setGradientPreset('whitered'); presetsMenuVisible = false; viewModel.updateGradient()" [style.background-image]="sanitize(viewModel.gradient.presetToTinyColor('whitered'))">white to red</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- show or hide disabled techniques -->
            <div *ngIf="configService.getFeature('toggle_hide_disabled')" class="control-row-item">
                <div class="control-row-button noselect"
                     (click)="viewModel.hideDisabled = !viewModel.hideDisabled;"
                     matTooltipPosition="below"
                     matTooltip="show/hide disabled">
                     <img [src]="viewModel.hideDisabled ? 'assets/icons/ic_visibility_off_black_24px.svg' : 'assets/icons/ic_visibility_black_24px.svg'" [alt]="viewModel.hideDisabled ? 'show disabled' : 'hide disabled'"/>
                 </div>
             </div>

            <!-- expand all sub-techniques -->
            <div *ngIf="configService.getFeature('subtechniques')" class="control-row-item">
                <div class="control-row-button noselect"
                     (click)="expandSubtechniques()"
                     matTooltipPosition="below"
                     matTooltip="expand sub-techniques">
                     <img [src]="viewModel.layout.layout == 'mini' ? 'assets/icons/unfold_more_gray_24px.svg' : 'assets/icons/unfold_more_black_24px.svg'" alt="expand sub-techniques"/>
                 </div>
             </div>

            <!-- collapse all sub-techniques -->
            <div *ngIf="configService.getFeature('subtechniques')" class="control-row-item">
                <div class="control-row-button noselect"
                     (click)="collapseSubtechniques()"
                     matTooltipPosition="below"
                     matTooltip="collapse sub-techniques">
                     <img [src]="viewModel.layout.layout == 'mini' ? 'assets/icons/unfold_less_gray_24px.svg' : 'assets/icons/unfold_less_black_24px.svg'" alt="collapse sub-techniques"/>
                 </div>
             </div>

             <!-- layout -->
             <div *ngIf="configService.getFeature('layout_controls')" class="control-row-item">
                 <div class="control-row-button dropdown noselect"
                      (click)="currentDropdown = currentDropdown !== 'layout' ? 'layout' : null;"
                      matTooltipPosition="below"
                      matTooltip="matrix layout">
                      <img src="assets/icons/ic_view_large_black_24px.svg"/>
                 </div>
                 <div class="dropdown-container layout" *ngIf="currentDropdown === 'layout'" #dropdown [class.left]="checkalign(dropdown)">
                     <div class="section">
                         <select [(ngModel)]="viewModel.layout.layout" placeholder="layout">
                             <option *ngFor="let option of viewModel.layout.layoutOptions" [value]="option">{{option}} layout</option>
                         </select>
                     </div>
                     <div class="section">
                        <div>
                             <input [disabled]="viewModel.layout.layout == 'mini'" id="showID-option" class="checkbox-custom" type="checkbox" [(ngModel)]="viewModel.layout.showID">
                             <label [class.disabled]="viewModel.layout.layout == 'mini'" for="showID-option" class="checkbox-custom-label noselect">show IDs</label>

                        </div>
                        <div>
                            <input [disabled]="viewModel.layout.layout == 'mini'" id="showName-option" class="checkbox-custom" type="checkbox"  [(ngModel)]="viewModel.layout.showName">
                            <label [class.disabled]="viewModel.layout.layout == 'mini'" for="showName-option" class="checkbox-custom-label noselect">show names</label>
                        </div>

                     </div>
                 </div>
             </div>


        </li>
        <li *ngIf="configService.getFeatureGroup('technique_controls', 'any') && configService.getFeature('selecting_techniques')">
            <div *ngIf="configService.getFeatureGroupCount('technique_controls') >= 3" class="section-label">
                technique controls
            </div>
            <!-- TECHNIQUE CONTROLS -->
            <!-- enable/disable technique -->
            <div *ngIf="configService.getFeature('disable_techniques')" class="control-row-item">
                <div class="control-row-button noselect"
                     (click)="setSelectedState()"
                     matTooltipPosition="below"
                     matTooltip="toggle state"
                     [matTooltipDisabled]="!viewModel.isCurrentlyEditing()">
                     <img [src]="viewModel.isCurrentlyEditing() ? 'assets/icons/ic_texture_black_24px.svg' : 'assets/icons/ic_texture_gray_24px.svg'" alt="toggle state"/>
                 </div>
             </div>

            <!-- background color -->
            <div *ngIf="configService.getFeature('manual_color')" class="control-row-item">

                <div class="control-row-button dropdown noselect"
                     (click)="viewModel.isCurrentlyEditing() ? currentDropdown = currentDropdown !== 'colorpicker' ? 'colorpicker' : null : continue"
                     matTooltipPosition="below"
                     matTooltip="background color"
                     [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"
                     [style.color]="viewModel.isCurrentlyEditing() ? '#000000' : '#aaaaaa'">

                    <svg border="#dddddd" [attr.fill]="viewModel.isCurrentlyEditing() ? '#000000' : '#aaaaaa'" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 0h24v24H0z" fill="none"/>
                        <path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"/>
                        <path [attr.class]="viewModel.isCurrentlyEditing() ? viewModel.getEditingCommonValue('color') : none" d="M0 20h24v4H0z"/>
                    </svg>
                </div>
                <!-- color picker (invisible, absolute)-->
                <div class="colorpicker dropdown-container" #dropdown [class.left]="checkalign(dropdown)"
                     *ngIf="currentDropdown === 'colorpicker'">

                    <div class="color-block wide noselect dropdown"
                         (click)="viewModel.editSelectedTechniques('color', '')">
                        no color
                    </div>
                    <div class="color-block square"
                         *ngFor="let color of viewModel.backgroundPresets"
                         [style.background]="color"
                         (click)="viewModel.editSelectedTechniques('color', color)"></div>
                </div>
            </div>


            <!-- score -->
            <div *ngIf="configService.getFeature('scoring')" class="control-row-item" >
                <div class="control-row-button dropdown noselect"
                     (click)="viewModel.isCurrentlyEditing() ? currentDropdown = currentDropdown !== 'score' ? 'score' : null : continue"
                     matTooltipPosition="below"
                     matTooltip="scoring"
                     [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"
                     [style.color]="viewModel.isCurrentlyEditing() ? '#000000' : '#aaaaaa'">
                     <img [src]="viewModel.isCurrentlyEditing() ? 'assets/icons/ic_insert_chart_black_24px.svg' : 'assets/icons/ic_insert_chart_gray_24px.svg'" alt="score"/>
                </div>
                <div class="dropdown-container inputfield" #dropdown [class.left]="checkalign(dropdown)"
                     *ngIf="currentDropdown === 'score'">
                     <mat-form-field>
                         <!-- update data whenever it is typed in -->
                         <input matInput
                                type="text"
                                onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 46 || event.charCode == 45"
                                [(ngModel)]="scoreEditField"
                                placeholder="score"
                                (input)="viewModel.editSelectedTechniques('score', $event.target.value); viewModel.editSelectedTechniques('scoreColor', viewModel.gradient.getColor($event.target.value));">
                         <mat-hint style="color: red" align="start" *ngIf="validateScoreInput()">not a number</mat-hint>
                     </mat-form-field>
                </div>
            </div>


            <!-- comment -->
            <div *ngIf="configService.getFeature('comments')"  class="control-row-item">

                <div class="control-row-button dropdown noselect"
                     (click)="viewModel.isCurrentlyEditing() ? currentDropdown = currentDropdown !== 'comment' ? 'comment' : null : continue"
                     matTooltipPosition="below"
                     matTooltip="comment"
                     [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"
                     [style.color]="viewModel.isCurrentlyEditing() ? '#000000' : '#aaaaaa'">
                     <img [src]="viewModel.isCurrentlyEditing() ? 'assets/icons/ic_insert_comment_black_24px.svg' : 'assets/icons/ic_insert_comment_gray_24px.svg'" alt="comment" />
                 </div>
                 <!-- comment input (invisible, absolute) -->
                 <div class="dropdown-container inputfield left" #dropdown [class.left]="checkalign(dropdown)"
                      *ngIf="currentDropdown === 'comment'">

                    <mat-form-field>
                        <textarea matInput
                                  matTextareaAutosize
                                  placeholder="comment"
                                  [(ngModel)]="commentEditField"
                                  (input)="viewModel.editSelectedTechniques('comment', $event.target.value)">
                        </textarea>
                    </mat-form-field>
                 </div>
             </div>
             <!-- remove all annotations -->
             <div *ngIf="configService.getFeature('clear_annotations')" class="control-row-item">
                 <div class="control-row-button noselect"
                      (click)="viewModel.resetSelectedTechniques(); populateEditFields()"
                      matTooltipPosition="below"
                      matTooltip="clear annotations on selected"
                      [matTooltipDisabled]="!viewModel.isCurrentlyEditing()">
                      <img [src]="viewModel.isCurrentlyEditing() ? 'assets/icons/ic_layers_clear_black_24px.svg' : 'assets/icons/ic_layers_clear_gray_24px.svg'" alt="remove all annotations"/>
                  </div>
              </div>
        </li>
    </ul>
</div>

<!--
oooo     oooo      o   ooooooooooo oooooooooo  ooooo ooooo  oooo 
 8888o   888      888  88  888  88  888    888  888    888  88   
 88 888o8 88     8  88     888      888oooo88   888      888     
 88  888  88    8oooo88    888      888  88o    888     88 888   
o88o  8  o88o o88o  o888o o888o    o888o  88o8 o888o o88o  o888o 
                                                                 -->

<div class="matrices" oncontextmenu="return false">
        <div class="spinner" *ngIf="!dataService.getDomain(viewModel.domainID).dataLoaded">
            <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
        </div>
        <div class="matrices-columns">
            <div class="matrix-column" *ngFor="let matrix of dataService.getDomain(viewModel.domainID).matrices">
                <div *ngIf="dataService.getDomain(viewModel.domainID).matrices.length > 1" class="matrix-name">{{matrix.name}}</div>
                <div *ngIf="viewModel.layout.layout == 'side'">
                    <matrix-side [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-side>
                </div>
                <div *ngIf="viewModel.layout.layout == 'flat'">
                    <matrix-flat [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-flat>
                </div>
                <div *ngIf="viewModel.layout.layout == 'mini'">
                    <matrix-mini [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-mini>
                </div>
            </div>
        </div>
    </div>


<!--
ooooo       ooooooooooo  ooooooo8 ooooooooooo oooo   oooo ooooooooo   
 888         888    88 o888    88  888    88   8888o  88   888    88o 
 888         888ooo8   888    oooo 888ooo8     88 888o88   888    888 
 888      o  888    oo 888o    88  888    oo   88   8888   888    888 
o888ooooo88 o888ooo8888 888ooo888 o888ooo8888 o88o    88  o888ooo88   
                                                                      -->

<div class="legendBar" (click)="showingLegend = !showingLegend" *ngIf="!showingLegend && configService.getFeature('legend')">
    <img src="assets/icons/ic_keyboard_arrow_up_black_24px.svg" style="position: absolute; left:4px; top: 3px;">
    <div class="noselect" style="padding:4px; font-size:14px; position: absolue; width: 100%; text-align:center">
        legend
    </div>
</div>

<div class="legend" *ngIf="showingLegend && configService.getFeature('legend')">
    <div class="legendBar" (click)="showingLegend = !showingLegend" style="position: absolute; top:0px; left:0px;">
        <img src="assets/icons/ic_keyboard_arrow_down_black_24px.svg" style="position: absolute; left:4px; top: 3px;">
        <div class="noselect" style="padding:4px; font-size:14px; position: absolue; width: 100%; text-align:center">
            legend
        </div>
    </div>
    <div class="itemArea">
        <div class="item" *ngFor="let item of viewModel.legendItems; let Even=even; let i=index" [class.even]="!Even">
            <input [(colorPicker)]="item.color" [(ngModel)]="item.color" [style.background]="item.color" [cpPosition]="'top'" [cpPresetColors]="viewModel.legendColorPresets" style="width:75px;"/>
            <!-- <input class="label" [(ngModel)]="item.label"> -->
            <mat-form-field class="label">
                    <input matInput

                    [(ngModel)]="item.label">

            </mat-form-field>
            <img src="assets/icons/ic_clear_gray_24px.svg" style="position: relative; top:5px; right:0px;" (click)="viewModel.deleteLegendItem(i);">
        </div>
        <button style="margin-left:75px; margin-top:10px; margin-bottom:10px;" class="button" (click)="viewModel.addLegendItem();">Add Item</button>
        <button style="margin-top:10px; margin-bottom:10px;" class="button" (click)="viewModel.clearLegend();">Clear</button>
    </div>
</div>
